<template>
    <div class="container" style="width:99%;margin-top:-25px;">
	<!-- 查询条件 -->
    <div class="query-box">
        <el-form :model="ResetFrom" status-icon ref="ResetFrom">
          <el-row>
            <el-col :span="4">
               <!-- <el-form-item label="" prop="userName">
                <el-input v-model="ResetFrom.userName" placeholder="请输入用户名">
                    <template slot="prepend">用户名</template>
                </el-input>
              </el-form-item> -->
              <div class="depart-box">
                <div class="slect-title">用户名</div>
                <el-autocomplete
                  v-model="ResetFrom.userName"
                  :fetch-suggestions="querySearchAsync"
                  placeholder="请输入内容"
                  @select="handleSelect"
                  
                ></el-autocomplete>
              </div>
            </el-col>
            <el-col :span="4">
               <el-form-item label="" prop="realName">
                <el-input v-model="ResetFrom.realName" placeholder="请输入真实姓名">
                    <template slot="prepend">真实姓名</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="" prop="phone">
                <el-input v-model="ResetFrom.phone" placeholder="请输入电话">
                    <template slot="prepend">联系电话</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <div class="depart-box">
                  <div class="slect-title">三级部门</div>
                  <el-form-item prop="threeLevelDepartment" >
                      <el-select clearable v-model="ResetFrom.threeLevelDepartment" @change="departmentSetValue" filterable>
                        <el-option
                          v-for="item in threeDept"
                          :key="item.id"
                          :label="item.deptName"
                          :value="item.id">
                      </el-option>
                      </el-select>
                 </el-form-item>
                </div>
            </el-col>
          </el-row>
          <el-row>
             <el-col :span='7'>
               <div class="depart-box">
                  <div class="slect-title">时间范围</div>
                     <el-date-picker
                      v-model="EstablishTime"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :default-time="['00:00:00', '23:59:59']"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </div>
             </el-col>
          </el-row>
        </el-form>
        <div class="from-btns">
            <kt-button :label="$t('action.reset')" perms="true" type="primary" @click="reset('ResetFrom')"/>
            <kt-button :label="$t('action.search')" perms="true" type="primary" @click="search"/>
        </div>
    </div>
  <!-- 导出按钮 -->
  <div class="add-btns">
    <kt-button :label="$t('action.exportExcel')" perms="customerstatistics:student:exportExcel" type="primary" @click="exportFile" />
  </div>
	<!--表格内容栏-->
  <StTable class="table-width" :showBatchDelete='false' :loading='loading'
		:data="pageResult" :columns="columns" @findPage="findPage">
	</StTable>

  </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import KtButton from "@/views/Core/KtButton";
import StTable from "@/views/Core/StTable";
import api from "@/http/api";
import CrmSwitch from "@/views/Core/CrmSwitch";
import axios from 'axios'
import { baseUrl } from '@/utils/global'
import Cookies from "js-cookie";
export default {
  name: "Student",
  components: {
    PopupTreeInput,
    StTable,
    KtButton,
    CrmSwitch
  },
  data() {
    return {
      size: "small",
      filters: {
        name: ""
      },
      pageResult:{
        content:[]
      },
      // 查询条件
      ResetFrom: {
        userName: "",
        userid:"",
        realName:"",
        phone:"",
        threeLevelDepartment:"",
        DateTime:"",
        dateEnd:"",
        dateStart:"",
        pageNum:0,
        pageSize:0,
        listUserId:[],
      },
      EstablishTime:[],
      threeDept:'',
      columns: [
        { type:'index', label: "序号", minWidth: 50 },
        { prop: "userName", label: "用户名", minWidth: 80 },
        { prop: "realName", label: "真实姓名", minWidth: 80 },
        { prop: "phone", label: "联系电话", minWidth: 120 },
        { prop: "threeLevelDepartmentName", label: "三级部门", minWidth: 100 },
        { prop: "callNum", label: "外呼次数", minWidth: 100 },
        { prop: "getThroughNum", label: "接通次数", minWidth: 70 },
        { prop: "trackingNum", label: "跟进次数", minWidth: 70 },
        { prop: "timeLength", label: "外呼时长", minWidth: 70 },
        { prop: "orderNum", label: "成单数", minWidth: 70 },
        { prop: "orderMoney", label: "成单金额", minWidth: 100 },
        { prop: "auditionNum", label: "试听数", minWidth: 80 },
        { prop: "assignNum", label: "分配资源量", minWidth: 100 },
        { prop: "auditionRate", label: "试听转化率", minWidth: 120 },
        { prop: "resourceRate", label: "资源转化率", minWidth: 120 }
      ],

      pageRequest: { pageNum: 1, pageSize: 30 },
      deptId: Cookies.get("threeLevelDeptId"),
      loading: false // 加载标识
    };
  },
  methods: {
    // 获取分页数据
    findPage: function(data) {
      if (data !== null) {
        this.loading=true
        this.pageRequest = data.pageRequest;
      }

      this.ResetFrom.pageSize = this.pageRequest.pageSize;
      this.ResetFrom.pageNum = this.pageRequest.pageNum;

      this.$api.student
        .saleOperationStatisticalList(this.ResetFrom)
        .then(res => {
          //以下3个返回参数，需要根据自己业务去判断，处理返回信息
          let result = res.result;       //执行结果
          let errorCode = res.errorCode; //错误编码
          let msg = res.msg;             //返回消息

          let content = {'content':res.saleOperationStatisticalInfolist,'totalSize':res.total};
          this.pageResult=content;
          this.loading=false
          //this.findUserRoles();
        })
        .then(data != null ? data.callback : "");
    },
    // 加载用户角色信息
    findUserRoles: function() {
      this.$api.role.findAll().then(res => {
        // 加载角色集合
        this.roles = res.data;
      });
    },
    //三级部门改变时，给对应的三级部门ID的参数赋值
    departmentSetValue:function(selVal){
      this.ResetFrom.threeLevelDepartment=selVal;
    },

    // 获取部门列表
    findDeptTree: function() {
      this.$api.dept.findDeptTree().then(res => {
        this.deptData = res.data;
      });
    },
    // 菜单树选中
    deptTreeCurrentChangeHandle(data, node) {
      this.dataForm.deptId = data.id;
      this.dataForm.deptName = data.name;
    },
    // 菜单树选中
    handleOptionClick() {},
    // 重置
    reset(ResetFrom){
      this.$refs.ResetFrom.resetFields();
      this.EstablishTime=''
      this.ResetFrom.userName=''
      this.pageRequest.pageNum = 1;
      this.findPage(null)
    },
    // 查询
    search(){
      this.ResetFrom.dateStart=this.EstablishTime[0]
      this.ResetFrom.dateEnd=this.EstablishTime[1]
      this.loading=true
      this.pageRequest.pageNum = 1;
      this.findPage(null);
      // console.log(this.EstablishTime)
      //  this.$api.student.saleOperationStatisticalList(this.ResetFrom).then(res=>{
      //     let content = {'content':res.saleOperationStatisticalInfolist,'totalSize':res.total};
      //     this.pageResult=content;
      //   })
    },
    // 导出
    exportFile(){
      axios({
        method:'get',
        url:baseUrl+'/saleOperationStatistical/export',
        params:this.ResetFrom
      }).then(res=>{
        window.open(res.request.responseURL)
      })
    },
    // 获取三级部门
    get_dept_data() {
      this.$api.dropdown.deptLevel3({deptType:1}).then(res => {
        this.threeDept = res.departmentInfoList;
      });
    },
    // 用户名
    querySearchAsync(queryString, callback) {
      let restaurants = [{}];
      let results = "";
      let threeId=JSON.parse(Cookies.get("threeLevelDeptId"))
      if(threeId==null){
        this.$api.dropdown.users({ userType: 3,deptType:1}).then(res => {
          for (let i of res.userInfoList) {
            i.value = i.userName; //将想要展示的数据作为value
          }
          restaurants = res.userInfoList;
          results = queryString
            ? restaurants.filter(this.createFilter(queryString))
            : restaurants;
          callback(results);
        });
      }else{
        this.$api.dropdown.users({ userType: 3,deptType:1}).then(res => {
          for (let i of res.userInfoList) {
            i.value = i.userName; //将想要展示的数据作为value
          }
          restaurants = res.userInfoList;
          results = queryString
            ? restaurants.filter(this.createFilter(queryString))
            : restaurants;
          callback(results);
        });
      }
      
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.userName
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(item) {
      this.ResetFrom.userName = item.userName;
    }
    
  },
  mounted() {
    this.findDeptTree();
    this.get_dept_data()
  }
};
</script>
<style >
@import url("../../assets/queryBox.css");
</style>
<style scope>
.add-btns .el-button:nth-child(1) {
  margin-right: 10px;
}
</style>

